<template>
<div>
    <div class="bannergo" @click="pichandler">
        <img src="/static/images/backk.png" class="fh" @click="fanhui">
        <img :src="bannerimg">
        <h6>{{bannerp}}</h6>
        <div class="suolue"><span class="iconfont icon-tupian"></span>{{gallaryimgs.length}}</div>
    </div>
    <transitionfade>
    <div class="dalog" v-show="isshow" @click="hidedalog">
           <swiper :options="swiperOption">
                    <div class="swiper-slide" v-for="(v,i) in gallaryimgs" :key="i">
                        <img :src="v">
                    </div>
            <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </transitionfade>
</div>
</template>

<script>
import transitionfade from '@/components/common/transition.vue'
    export default {
        name: 'gobanner',
        components:{transitionfade},
        props:['bannerimg','bannerp','gallaryimgs'],
        data(){
            return{
                isshow:false,
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination',
                        // type: 'bullets',
                        type: 'fraction',
                        //type : 'progressbar',
                        //type : 'custom',
                    },
                },
            }
        },
        methods:{
            hidedalog(){
                this.isshow = false
            },
            pichandler(){
                this.isshow = !this.isshow
            },
            fanhui(){
                this.$router.push({path:'/index'})
                console.log(this.$router)
            },
        }
    }
</script>

<style scoped>
    .suolue .icon-tupian{
        display: inline-block;
        font-size: 24px;
        padding-right: 8px;
        color: #fff;
    }
    .suolue{
        width: 122px;
        height: 34px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 16px;
        text-align: center;
        line-height: 34px;
        position: absolute;
        bottom: 14px;
        right: 20px;
        color: #fff;
    }
    .swiper-pagination-fraction{
        color: #fff;
        position: fixed;
        bottom: 230px;
    }
    .swiper-container{
        height: 750px !important;
    }
    .swiper-slide img{
        width: 100%;
    }
    .dalog{
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
    }
    .bannergo {
        width: 100%;
        position: relative;
    }
    .bannergo img {
        width: 100%;
    }
    .bannergo h6{
        position: absolute;
        bottom: 20px;
        left: 18px;
        font-size: 28px;
        color: #fff;
    }
    .bannergo .fh{
        position: absolute;
        top: 18px;
        left: 18px;
        width: 64px;
        height: 64px;
    }
</style>